<template>
	<view class="chjian">
		<view class="renwu">
			<view class="rw_nr">
				主题类型：{{xq.themType}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				对应课程：{{xq.clazzName}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				任务名称：{{xq.taskName}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				任务主题：{{xq.themName}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				任务背景：{{xq.background}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				任务目标：{{xq.taskedTarget}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				任务内容：{{xq.taskedContent}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				下发老师：{{xq.teaName}}
			</view>
		</view>
		<view class="renwu">
			<view class="rw_nr">
				开始时间：{{xq.startTime}}
			</view>
			<view class="rw_nr">
				结束时间：{{xq.endTime}}
			</view>
		</view>
		<view class="renwu" style="border: none;">
			<view class="rw_nr">
				活动地点：{{xq.addr}}
			</view>
		</view>
		<hengxian></hengxian>
		<view class="buzhou">
			<text class="wz">完成步骤</text>
			<view class="bz1" v-if="xq.task1">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">虚拟仿真VR</text>
						<text class="wz2" @tap="dataAction"><i class="iconfont icon-dingwei"
								style="margin-right: 5upx;font-size: 26upx;"></i>获取定位</text>
					</view>
					<text class="wz2">
						内容：{{xq.task1.name}}
					</text>
					<view class="ditu" >
						<view class="page-section page-section-gap" style="height: 168upx;">
							<map v-if="mapShow" style="width: 100%; height: 168upx;" :latitude="latitude" :longitude="longitude"
								:markers="markers">
							</map>
						</view>
					</view>
					<!-- 保存 -->
					<view class="uni-padding-wrap uni-common-mt baocun">
						<button class="mini-btn bao" type="warn" size="mini" @click="open" :disabled="commitStatus == 3">确认签到打卡</button>
						<button class="mini-btn piyue" type="primary" size="mini" @click="qiantui" :disabled="commitStatus == 3">确认签退打卡</button>
						<!-- 弹出框 -->
					</view>
				</view>
			</view>
			<view class="bz1" v-if="xq.task9">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">在线研读</text>
					</view>
					<text class="wz2" @click="showReadOnline()" style="color: #0000FF;text-decoration: underline;" > 
						{{xq.task9.content}}
						<!-- <a href="" class='iconfont icon-xiazai1' style="margin-right: 5upx;font-size: 26upx;"></a> -->
					</text>
				</view>
			</view>
			<view class="bz1" v-if="xq.task3">
				<view class="bz_t" style="max-height: 500upx;">
					<view class="btz_s">
						<text class="wz1">在线观影</text>
					</view>
						
					<view class="ship" @click="guanyong(xq.task3.id)" style="text-align: left;">
						<!-- <view class="videx" @click="guanyong(xq.task3.id)"  style="position: relative;text-align: center;"> -->
							<image :src="xq.task3.faceUrl" style="height: 300upx;text-align: left;" mode="heightFix"></image>
						<!-- </view> -->
						<!-- <video class="videx" id="myVideo" :src="xq.task3.faceUrl" controls></video> -->
						<view @click="guanyong(xq.task3.id)" style="font-size: 26upx;">{{xq.task3.name}}</view>
					</view>
				</view>
			</view>
			<view class="bz1" v-if="xq.task4">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">全景体验</text>
					</view>
					<text class="wz2" style="color: #0000FF;text-decoration:underline;" @click="openVovi(xq.task4.id)">
						{{xq.task4.name}}
					</text>
				</view>
			</view>
			<view class="bz1" v-if="xq.task7">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">其他活动</text>
					</view>
					<text class="wz2 wzx">
						{{xq.task7.remark}}
					</text>
					<text class="wz2 wzys">
						<!-- {{xq.task7.fileUrl}} -->
						<text v-if="xq.task7.fileUrl" style="margin-right: 5upx;font-size: 26upx;color: #0000FF;text-decoration:underline;" @click="downFile">已上传</text>
						<text v-else style="margin-right: 5upx;font-size: 26upx;">未上传</text>
					</text>
					<view class="uni-padding-wrap uni-common-mt scwj">
						<view v-show="show_ok">
							<l-file ref="lFile" @up-success="onSuccess"></l-file>
						</view>
						<button :disabled="commitStatus == 3" class="mini-btn shangchaun" type="default" size="mini" @click="opn_sc()"><i class="iconfont icon-shangchuan" ></i>上传文件</button>
					</view>
				</view>
			</view>
			<!-- <hengxian></hengxian> -->
			<view class="bz1" v-if="xq.task5">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">简答题</text>
					</view>
					<text class="wz2">
						{{xq.task5.remark}}
					</text>
					<textarea maxlength="1000" class="bs" v-model="jd" :disabled="commitStatus == 3" placeholder="在这里填写答案" />
					
				</view>
			</view>
			<view class="bz1" v-if="xq.task6">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">论述题</text>
					</view>
					<text class="wz2">
						{{xq.task6.remark}}
					</text>
					<textarea maxlength="1000" class="bs" v-model="ls" :disabled="commitStatus == 3" placeholder="在这里填写答案" />
					
				</view>
			</view>
			<view class="bz1" v-if="xq.task8">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">其他线下活动</text>
					</view>
					<text class="wz2">
						{{xq.task8.remark}}
					</text>
				</view>
			</view>
			<view class="bz1" v-if="xq.task10">
				<view class="bz_t">
					<view class="btz_s">
						<text class="wz1">实践报告</text>
					</view>
					<text class="wz2">
						{{xq.task10.remark}}
					</text>
					<textarea maxlength="1000" class="bs" v-model="reportContent" :disabled="commitStatus == 3" placeholder="在这里填写实践报告" />
					
				</view>
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt scwj">
					<button class="mini-btn shangchaun" @click="saveDetail" type="default"
						style="background: #B31610; color: #FFFFFF;" size="mini">保存</button>
					<button class="mini-btn shangchaun" @click="chakn" type="default"
						style="background: #B31610; color: #FFFFFF;" size="mini">提交</button>
		</view>
		<uni-popup class="popss" ref="popups" >
			<view class="popup-content">
				<view class="posi">
					<image class="m-t6" src="../../../static/qd01.png" mode=""></image>
					<text class="text m-t3">
						{{siginMsg}}
					</text>
					<view class="queren m-t6" @click="close()" type="default">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup class="popss" ref="popup">
			<view class="popup-content" style="font-size: 28upx;color: #333;width: 700upx;">
				<scroll-view scroll-y @scroll.stop='scrollStop' style="height: 800upx;padding: 20upx;width: 680upx;" >
					{{readOnlineContent}}
				</scroll-view>
				<view class="queren" @click="close()" type="default" >确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lFile from 'uni_modules/l-file/components/l-file/l-file.vue'
	export default {
		components:{lFile},
		data() {
			return {
				id: [],
				xq: [],
				jd: '',//简答题
				ls: '',//论述题
				reportContent:'',//实践报告
				lon: '',
				lat: '',
				title: 'map',
				latitude: this.lat,
				longitude: this.lon,
				circles: [],
				markers: [],
				show_wj:false,
				show_ok:false,
				tasks:[],//任务
				readOnlineContent:'',//在线研读内容
				mapShow:true,//是否显示地图，解决map层级过高的问题
				siginMsg:'',//签到签退显示内容
				commitStatus:0,//任务批阅状态 1：未提交；2：未批阅；3：已批阅
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
			const _this = this;
			_this.getLocationInfo();
			uni.getSystemInfo({
				success: (res) => {
					_this.mapHeight = res.screenHeight - res.statusBarHeight
					_this.mapHeight = _this.mapHeight
				}
			}),
			this.taskedIsChecked();
		},
		created() {
			let that = this
			let params = {
				"id": that.id
			}
			that.pyReq(that.$http.getStuTaskedDetail,params,function(res){
					that.tasks = res.result;
					that.xq = res.result
					if(res.result.task5){
						that.jd = res.result.task5.content
					}
					if(res.result.task6){
						that.ls = res.result.task6.content
					}
					if(res.result.task10){
						that.reportContent = res.result.task10.content
					}
					
					
			});
		},
		methods: {
			//防止滚动冒泡
			scrollStop(){
				return;
			},
			//跳转到全景
			openVovi(id){
				let that = this;
				if(that.commitStatus == 3){
					uni.hideLoading();
					uni.showLoading({
						title: '已批阅，请通过首页-全景思政进行体验',
						icon:'none'
					});
					setTimeout(function(){
						uni.hideLoading();
					},1500);
					return;
				}
				that.pyReq(that.$http.getVoviUrl,{id:id},function(res){
					uni.navigateTo({
						url:'/pages/index/ziye/weburl?url='+res.result.url+"&title="+res.result.name,
						complete(res) {
							console.log(res);
						}
					})
				});
			},
			//获取任务状态 1：未提交；2：未批阅；3：已批阅
			taskedIsChecked(){
				let that = this;
				that.pyReq(that.$http.taskedIsChecked,{taskedId:that.id},function(res){
					that.commitStatus = res.result;
				});
			},
			//下载社会访谈及其他线上活动
			downFile(){
				plus.runtime.openURL(this.xq.task7.fileUrl, function(res) {
				                        // console.log(res);  
				                    });
			},
			//显示在线研读
			showReadOnline(){
				let that = this;
				that.pyReq(that.$http.getReadOnline,{id:that.id},function(res){
					that.$refs.popup.open('center')
					that.readOnlineContent = res.result.content;
					that.show_open = true
					that.mapShow = false;
				});
			},
			/* 上传文件 */
			opn_sc(){
				let that = this
				this.show_ok = true
				console.log(this.show_ok)
				let headers = {
					// 'content-type': 'application/x-www-form-urlencoded',
					'token': uni.getStorageSync('token')
				}
				this.$refs.lFile.upload({	
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换
					url:'http://'+uni.getStorageSync("baseUrl")+'/uploadF',
					//默认file,上传文件的key
					name:'file',
					header: headers,
					//...其他参数
				});	
			},
			onSuccess(res) {
				let that = this;
				let msg = JSON.parse(JSON.stringify(res));
				console.log(msg.msg);
				that.xq.task7.fileUrl = msg.msg;
				this.show_wj = true
				uni.showToast({
					title: "上传成功",
					icon: 'none'
				})
			},
			dataAction: function() {
				// this.$refs.mainindex.getLocationInfo();
				this.getLocationInfo()
				console.log(this.latitude)
			},
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "wgs84",
					success: function(res) {
						console.log(res);
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						console.log(that.longitude)
						that.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "../../static/dw.jpg",
							// width: that.markerHeight, //宽
							//              height: that.markerHeight, //高
						}];
						that.circles = [{
							latitude: res.latitude,
							longitude: res.longitude,
							fillColor: "#D9E6EF",
							color: "#A7B6CB",
							radius: 50,
							strokeWidth: 2
						}]
						// that.getList();
					},fail:function(res) {
						console.log(res);
					},complete:function(res){
						console.log(res);
					}
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息，为您推荐附近的美食",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			open() {
				let that = this
				let params = {
					"taskedId": that.id,
					"lon": that.longitude,
					"lat": that.latitude,
					"signType": 1
				}
				if(!that.longitude){
					uni.hideLoading();
					uni.showLoading({
						title: '获取位置信息失败',
						icon:'none'
					});
					return;
				}
				that.pyReq(that.$http.signinVr,params,function(res){
						that.$refs.popups.open('center')
						that.show_open = true
						that.mapShow = false;
						that.siginMsg = res.msg
				});
			},
			qiantui(){
				let that = this
				let params = {
					"taskedId": that.id,
					"lon": that.longitude,
					"lat": that.latitude,
					"signType": 2
				}
				if(!that.longitude){
					uni.hideLoading();
					uni.showLoading({
						title: '获取位置信息失败',
						icon:'none'
					});
					return;
				}
				that.pyReq(that.$http.signinVr,params,function(res){
						that.$refs.popups.open('center')
						that.show_open = true
						that.mapShow = false;
						that.siginMsg = res.msg
				});
			},
			close() {
				let that = this;
				this.$refs.popups.close()
				this.$refs.popup.close();
				setTimeout(function(){
					that.mapShow = true;	
				},300)
			},
			guanyong(id) {
				let that = this;
				if(that.commitStatus == 3){
					uni.hideLoading();
					uni.showLoading({
						title: '已批阅，请通过首页-教学资源进行播放',
						icon:'none'
					});
					setTimeout(function(){
						uni.hideLoading();
					},1500);
					return;
				}
				uni.navigateTo({
					url: '/pages/index/jiaoxue/shipin?id=' + id
				})
			},
			saveDetail() {
				let that = this
				let params = {
					"taskedId": that.id,
				}
				if(!that.xq.task5||!that.jd){
					
				}else{
					params.content5 = that.jd;
				}
				if(!that.xq.task6||!that.ls){
					
				}else{
					params.content6 = that.ls;
				}
				if(!that.xq.task7||!that.xq.task7.fileUrl){
					
				}else{
					params.fileName = that.xq.task7.fileUrl;
				}
				if(!that.xq.task10||!that.reportContent){
					
				}else{
					params.content10 = that.reportContent;
				}
				
				that.pyReq(that.$http.saveDetail,params,function(res){
				});
			},
			chakn() {
				let that = this
				let params = {
					"taskedId": that.id,
				}
				if(!that.xq.task5||!that.xq.task5.content){
					
				}else{
					params.content5 = that.xq.task5.content;
				}
				if(!that.xq.task6||!that.xq.task6.content){
					
				}else{
					params.content6 = that.xq.task6.content;
				}
				if(!that.xq.task7||!that.xq.task7.fileUrl){
					
				}else{
					params.fileName = that.xq.task7.fileUrl;
				}
				if(!that.xq.task10||!that.xq.task10.content){
					
				}else{
					params.content10 = that.reportContent;
				}
				that.pyReq(that.$http.stuCommitTasked,params,function(res){
				});
			}
		}

	}
</script>

<style>
	uni-button:after{
		width: 490upx;
	}
	.queren {
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		background: #B31610;
		color: #FFFFFF;
		text-align: center;
		font-size: 30upx;
		font-weight: 700;
	}
	.bs{
		/* display: block; */
		width: 584upx !important;
		height: 150upx;
		font-size: 26upx;
		background-color: #F1F1F1;
		padding: 10upx 20upx;
	}
	.popup-content {
		/* position: fixed;
		top: 35%;
		left: 10%; */
		width: 576upx;
		min-height: 390upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		overflow: hidden;
	}

	.posi {
		flex-wrap: wrap;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-content image {
		width: 120upx;
		height: 120upx;
	}

	.text {
		display: block;
		width: 100%;
		font-size: 30upx;
		font-weight: 700;
		text-align: center;
	}

	.tanchu {
		background: #FFFFFF;
	}

	.chjian {
		padding-bottom: 50upx;
	}

	.bz_t textarea {
		width: 100%;
		height: 150upx;
		font-size: 26upx;
		border: 1px solid #666666;
		margin-top: 20upx;
		border-radius: 10upx;
	}

	.scwj {
		text-align: right;
	}

	.shangchaun {
		/* height: 60upx; */
		line-height: 60upx;
		width: 150upx;
		background: none;
		font-size: 26upx;
		margin-left: 20px;
	}

	.wzys {
		color: #040A95;
		margin-top: 15upx;
	}

	.wzx {
		display: block;
		border-bottom: 1upx solid #666666;
		margin-top: 15upx;
		padding-bottom: 20upx;
	}

	.ship {
		width: 520upx;
		/* max-height: 240upx; */
		margin-top: 20upx;
		background: #FFF;
	}

	.videx {
		width: 100%;
		height: 100%;
	}

	.baocun {
		text-align: right;
		padding-top: 50upx;
	}

	.baocun button {
		width: 250upx;
		height: 50upx;
		font-size: 26upx;
		line-height: 50upx;
	}

	.piyue {
		background-color: #666666;
	}

	.bao {
		margin-right: 20upx;
	}

	.btz_s {
		display: flex;
		justify-content: space-between;
	}

	.wz1 {
		font-size: 26upx;
		font-weight: 700;
	}

	.wz2 {
		font-size: 26upx;
	}

	.bz1 {
		margin-top: 20upx;
		border: 1upx solid #666666;
		box-shadow: 0px 1px 8px #d9d9d9;
		border-radius: 6upx;
	}

	.ditu {
		width: 100%;
		height: 168upx;
		border: 1px solid #007AFF;
		margin-top: 15upx;
	}

	.bz_t {
		margin: 20upx;
	}

	.wz {
		font-size: 30upx;
		font-weight: 700;
	}

	.renwu {
		width: 700upx;
		margin: 0 auto;
		border-bottom: 1upx solid #666666;
	}

	.rw_nr {
		font-size: 26upx;
		margin: 30upx 16upx;
	}

	.buzhou {
		margin: 30upx 40upx;
	}
</style>
